import React, { useState, useEffect,useContext } from 'react';
import { Layout,Breadcrumb } from 'antd';
import Header from '../components/Header';
import SiderMenu from '../components/SiderMenu';
import "./MainLayout.scss";

import { BrowserRouter as Router, Route, Routes, Outlet, useLocation,matchPath } from 'react-router-dom';
import LoginPage from '../pages/LoginPage';
import HomePage from '../pages/HomePage';
import MenuList from '../components/MenuList';

import About from '../pages/About';
import { generateRoutes as generateRoutesAction } from '../store/actions/permission';
import { useDispatch, useSelector } from 'react-redux';

import { DictContext } from '../context/context';

const { Content, Footer,    Sider} = Layout;

  
const MainLayout = ({ children }) =>{ 

    const dispatch = useDispatch();
    const routes = useSelector(state => state.permission.routes);
    const sidebarRouters = useSelector(state => state.permission.sidebarRouters);
    const location = useLocation();
    const [breadItems, setBreadItems]  = useState([]);
    
        const { getSystemName } = useContext(DictContext);
  // 在组件顶层计算匹配的路由
  const [matchedRoutes, setMatchedRoutes] = useState([]);
     // const matchedRoutes = useMatchedRoutes(routes);
    useEffect(() => {
        //console.log('====MainLayout====');
        //dispatch(generateRoutesAction());
        //console.log('====matched====', matchedRoutes);
        function findMatchedRoutes(routesConfig) {
            let matchedRoutes = [];
            const pathSections = location.pathname.split('/');
            // 过滤掉空字符串，防止 "//" 或者以 "/" 开头导致的空元素
            const filteredPathSections = pathSections.filter(section => section);
            routesConfig.forEach(route => {
                filteredPathSections.forEach((section, index) => {
                    //console.log('====findMatchedRoutes====',route.path, '/'+section);
                    if (matchPath({ path: route.path }, '/'+section)) {
                        matchedRoutes.push(route);
                        if (route.children) {
                            matchedRoutes = [...matchedRoutes, ...findMatchedRoutes(route.children)];
                        }
                    }
                })
            });
      
            return matchedRoutes;
          }
      
          const matched = findMatchedRoutes(routes);
          //console.log('====matched====', matched);
          if(matched.length>0){
              let breadItemsTemp = [];
              matched.map(route => {
                if(route.children && route.children.length > 0) {
                    breadItemsTemp.push({
                        href: '#',
                        title: route.meta.title,
                    })
                } else {
                    breadItemsTemp.push({
                        href: route.component,
                        title: route.meta.title,
                    })
                }
              })
              setBreadItems(breadItemsTemp);
          }
          setMatchedRoutes(matched);
    //}, [location,matchedRoutes]);
}, [location,routes]);

    //console.log('====sidebarRouters=======',sidebarRouters)
    //console.log('====routes=======',routes)
    
return (
  <Layout style={{ minHeight: '100vh' }}>
    <Sider theme="dark" breakpoint="lg" collapsedWidth="0" collapsible>       
        <div className="logo-container">
            <div className="sys-name">{getSystemName()}</div>
        </div>
        {/* <SiderMenu /> */}
        <div style={{ minHeight: '93vh', backgroundColor: '#000'}}>
        <SiderMenu menuData={sidebarRouters} />
        </div>
    </Sider>
    <Layout>
      <Header />
      <Content>
        <Breadcrumb style={
          { margin: '70px 55px 3px' }
        } 
        items={breadItems} />
        <div  style={{
              padding: 24,
              margin: '3px 10px 10px' ,
              //minHeight: '93vh',
              height: '90%',
              backgroundColor: '#fff',
              borderRadius: 15,
            }}>
          <Outlet />
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>Ant Design ©2025 Created by BigWolf</Footer>
    </Layout>
  </Layout>
);
}

export default MainLayout;